<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<link href="css/box.css" rel="stylesheet" />
		<style>
		.box2{
			width: 200px;
			height:300px;
			/* border-style: solid;	边框样式
			border-width: 1px;	边框粗细
			border-color: red;	边框的颜色 */
			/* 复合写法 border: 粗细 颜色 样式 */
			border: 1px red solid;
			/* padding-top:10px */	/* 上内边距 */
			/* padding-bottom:20px */		/* 下内边距 */
			/* padding-left:40px */	/* 左内边距 */
			/* padding-right:40px */	/* 右内边距 */
			/* 复合写法padding:大小值 */
			/* padding:10px 20px 30px 40px; */	/* 上右下左顺时针 */
			padding:10px 20px 30px;		/* 上 左右 下 */
			padding:10px 20px;		/* 上下 左右 */
			padding:10px;	/* 上下左右 */
			}
		</style>
		<style>
			.box3{
				width: 200px;
				height:300px;
				border: 1px red solid;
				/* margin-top: 100px */		/* 上外边距 */
				/* margin-left: 100px */		/* 左外边距 */
				/* margin-right:100px */		/* 右外边距 */
				/* margin-bottom:100px */		/* 下外边距 */
				/* 复合写法margin:大小值 */
				margin: 10px 20px 30px 40px;
				margin:100px auto 0;	/* auto 自动的*/:
			}
		</style>
	</head>
	<body>
		<!-- 
		盒子模型4个元素：
		1.content内容：
		2.padding内边距：
		 padding-top:上内边距
		 padding-bottom:下内边距
		 padding-left:左内边距
		 padding-right:右内边距
		3.border边框：
			大小、颜色、样式
		4.margin外边距：
		 margin-top:上外边距
		 margin-left:左外边距
		 margin-right:右外边距
		 margin-bottom:下外边距
		（div:标签选择器）
		 -->
		 <div class="box1">hello world!</div>
		 <br/>
		 <div class="box2">你好!</div>
	</body>
</html>
